<template>
  <div class="dashboard-editor-container">
    <div class="date--tabs">
      <div class="date__tab mar-r-10" :class="{'date--tabs__active': dateIndex === 1}" @click="dateTabsClick(1)">累计至今</div>
      <div class="date__tab mar-r-10" :class="{'date--tabs__active': dateIndex === 2}" @click="dateTabsClick(2)">近7天</div>
      <div class="date__tab mar-r-30" :class="{'date--tabs__active': dateIndex === 3}" @click="dateTabsClick(3)">近30天</div>
      <div class="date__tip">{{dateTip}}</div>
    </div>
    <total-bar :dateIndex="dateIndex"></total-bar>
    <div class="flex flex-between flex-top">
      <div class="bar-chart--box flex-item">
        <div class="block--title pad-l-20" style="backgroundColor: #3A3A3E;">商品销售渠道分布</div>
        <bar-chart-layout 
          :legendDataList="channelLegendDataList"
          :axisTableData="channelAxisTableData"
          :legendColor="['#714BFF', '#2E55FF', '#009CFF']"
          :dataObj="channelDataObj"
          color="#fff"
          height="418px"
          :yAxisShow='false'
          legendLeft="20px"
          legendTop="10px"
          :barWidth="15">
        </bar-chart-layout>
      </div>
      <div class="bar-chart--box mar-l-20 flex-item">
        <div class="block--title pad-l-20" style="backgroundColor: #3A3A3E;">TOP5商品行业分类排行</div>
        <bar-chart-layout 
          :legendDataList="sortLegendDataList"
          :axisTableData="sortAxisTableData"
          :legendColor="['#B6E3FF', '#489AFF', '#4851FF', '#714BFF', '#3900AC']"
          :dataObj="sortDataObj"
          color="#fff"
          height="418px"
          :yAxisShow='false'
          legendLeft="20px"
          legendTop="10px"
          :barWidth="15">
        </bar-chart-layout>
      </div>
    </div>
    <el-row :gutter="10" class="flex-top" style="margin-left:-10px;margin-right:-10px;">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="padding-left:10px;padding-right:10px">
        <div class="ranking-wrap rose-wrap">
          <div class="block--title v-align-c">
            <div class="width-4 height-4" style="background-color:#fff;border-radius:50%;"></div>
            <div class="mar-l-8">商品来源分布</div>
          </div>
          <div class="pad-l-20 pad-r-20 v-align-l">
            <rose-ranged boxId="rose-source" width="280px" :chartData="sourceChartData" :legend="false"></rose-ranged>
            <el-table 
              :data="sourceChartData" 
              row-class-name="ranking-row"
              header-cell-class-name="rose-header"
              style="width: 480px;max-width: 480px;"
            >
              <el-table-column prop="type" label="渠道类型"></el-table-column>
              <el-table-column prop="value" label="件数">
                <template slot-scope="scope">
                  <span v-formatNum.number="scope.row.value"></span>
                </template>
              </el-table-column>
              <el-table-column prop="percent" label="占比">
                <template slot-scope="scope">
                  <span v-text="scope.row.percent + '%'"></span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="padding-left:10px;padding-right:10px">
        <div class="ranking-wrap rose-wrap">
          <div class="block--title v-align-c">
            <div class="width-4 height-4" style="background-color:#fff;border-radius:50%;"></div>
            <div class="mar-l-8">商品销量分布</div>
          </div>
          <div class="pad-l-20 pad-r-20 v-align-l">
            <rose-ranged boxId="rose-sales" width="280px" :chartData="salesChartData" :legend="false"></rose-ranged>
            <el-table 
              :data="salesChartData" 
              row-class-name="ranking-row"
              header-cell-class-name="rose-header"
              style="width: 480px;max-width: 480px;"
            >
              <el-table-column prop="type" label="渠道类型"></el-table-column>
              <el-table-column prop="value" label="件数">
                <template slot-scope="scope">
                  <span v-formatNum.number="scope.row.value"></span>
                </template>
              </el-table-column>
              <el-table-column prop="percent" label="占比">
                <template slot-scope="scope">
                  <span v-text="scope.row.percent + '%'"></span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="flex-top" style="margin-left:-10px;margin-right:-10px;">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="padding-left:10px;padding-right:10px">
        <div class="ranking-wrap">
          <div class="block--title pad-l-20" style="backgroundColor: #3A3A3E;">TOP10零售商品排行</div>
          <div class="pad-l-20 pad-r-20 pad-t-20">
            <el-table
              :data="retailTable"
              row-class-name="ranking-row"
              header-cell-class-name="ranking-header"
            >
              <el-table-column label="排名" min-width="50">
                <template slot-scope="scope">
                  <img v-if="scope.$index === 0" :src="rankingIcon1" />
                  <img v-else-if="scope.$index === 1" :src="rankingIcon2" />
                  <img v-else-if="scope.$index === 2" :src="rankingIcon3" />
                  <span class="mar-l-14" v-else>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="商品" min-width="200">
                <template slot-scope="scope">
                  <div class="v-align-l">
                    <div class="width-44 height-44">
                      <img class="width-44 height-44" v-if="scope.row.goodsImageUrl" :src="scope.row.goodsImageUrl" alt="">
                    </div>
                    <div class="mar-l-11 color-ts-w">
                      <div class="line-1 pad-r-30">{{scope.row.goodsTitle}}</div>
                      <div>售价<span class="mar-l-8">￥{{scope.row.goodsPrice}}</span></div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="销量" min-width="80">
                <template slot-scope="scope">
                  <span v-formatNum.number="scope.row.goodsNum"></span>
                </template>
              </el-table-column>
              <el-table-column prop="orderPrice" label="销售额" min-width="80">
                <template slot-scope="scope">
                  <span v-formatNum="scope.row.orderPrice"></span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="padding-left:10px;padding-right:10px">
        <div class="ranking-wrap">
          <div class="block--title pad-l-20" style="backgroundColor: #3A3A3E;">TOP10批发商品排行</div>
          <div class="pad-l-20 pad-r-20 pad-t-20">
            <el-table
              :data="wholesaleTable"
              row-class-name="ranking-row"
              header-cell-class-name="ranking-header"
            >
              <el-table-column label="排名" min-width="50">
                <template slot-scope="scope">
                  <img v-if="scope.$index === 0" :src="rankingIcon1" />
                  <img v-else-if="scope.$index === 1" :src="rankingIcon2" />
                  <img v-else-if="scope.$index === 2" :src="rankingIcon3" />
                  <span class="mar-l-14" v-else>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="商品" min-width="200">
                <template slot-scope="scope">
                  <div class="v-align-l">
                    <div class="width-44 height-44">
                      <img class="width-44 height-44" v-if="scope.row.goodsImageUrl" :src="scope.row.goodsImageUrl" alt="">
                    </div>
                    <div class="mar-l-11 color-ts-w">
                      <div class="line-1 par-r-30">{{scope.row.goodsTitle}}</div>
                      <div>售价<span class="mar-l-8">￥{{scope.row.goodsPrice}}</span></div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="销量" min-width="80">
                <template slot-scope="scope">
                  <span v-formatNum.number="scope.row.goodsNum"></span>
                </template>
              </el-table-column>
              <el-table-column prop="orderPrice" label="销售额" min-width="80">
                <template slot-scope="scope">
                  <span v-formatNum="scope.row.orderPrice"></span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="flex-top" style="margin-left:-10px;margin-right:-10px;">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="padding-left:10px;padding-right:10px">
        <div class="ranking-wrap author-sales-wrap">
          <div class="block--title v-align-c">
            <div class="width-4 height-4" style="background-color:#fff;border-radius:50%;"></div>
            <div class="mar-l-8">新晋10w+/100w+业绩主播</div>
          </div>
          <div class="pad-l-20 pad-r-20 author-rank">
            <img v-if="homeRink" :src="homeRink" alt="" class="bg-img">
            <div class="float-box">
              <div class="float">
                <el-tooltip placement="bottom" effect="light" v-for="(item, index) in hundredThousandPriceAnchors" :key="index">
                  <div slot="content">
                    <div class="content-flex font-14 pad-t-5 pad-r-6 pad-b-4 pad-l-5">
                      <div>{{item.nickname}}</div>
                      <div class="v-align-c mar-t-5 mar-b-5 mar-l-5">
                        <div class="width-4 height-4" style="background-color:#0A89FF;border-radius:50%;"></div>
                        <div class="mar-l-8 font-color-6">销售额：<span class="mar-l-10 font-16" style="color:#0A89FF;" v-formatNum="item.orderPrice"></span></div>
                      </div>
                      <div class="mar-l-17"><span class="font-color-6">达成时间：</span> {{item.payTime}}</div>
                    </div>
                  </div>
                  <img v-if="item.avatar" :src="item.avatar" alt="" class="headshop-img cursor-p" :style="{'left': floatLeft[index].left, 'top': floatLeft[index].top}">
                </el-tooltip>
              </div>
              <div class="float">
                <el-tooltip placement="bottom" effect="light" v-for="(item, index) in millionPriceAnchors" :key="index">
                  <div slot="content">
                    <div class="content-flex font-14 pad-t-5 pad-r-6 pad-b-4 pad-l-5">
                      <div>{{item.nickname}}</div>
                      <div class="v-align-c mar-t-5 mar-b-5 mar-l-5">
                        <div class="width-4 height-4" style="background-color:#0A89FF;border-radius:50%;"></div>
                        <div class="mar-l-8 font-color-6">销售额：<span class="mar-l-10 font-16" style="color:#0A89FF;" v-formatNum="item.orderPrice"></span></div>
                      </div>
                      <div class="mar-l-17"><span class="font-color-6">达成时间：</span> {{item.payTime}}</div>
                    </div>
                  </div>
                  <img  v-if="item.avatar" :src="item.avatar" alt="" class="headshop-img cursor-p" :style="{'left': floatRight[index].left, 'top': floatRight[index].top}">
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="padding-left:10px;padding-right:10px">
        <div class="ranking-wrap">
          <div class="block--title pad-l-20" style="backgroundColor: #3A3A3E;">TOP10主播业绩排行</div>
          <div class="pad-l-20 pad-r-20 pad-t-20">
            <el-table 
              :data="anchorTable"
              row-class-name="ranking-row"
              header-cell-class-name="ranking-header"
            >
              <el-table-column label="排名" min-width="50">
                <template slot-scope="scope">
                  <img v-if="scope.$index === 0" :src="rankingIcon1" />
                  <img v-else-if="scope.$index === 1" :src="rankingIcon2" />
                  <img v-else-if="scope.$index === 2" :src="rankingIcon3" />
                  <span class="mar-l-14" v-else>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="主播" min-width="200">
                <template slot-scope="scope">
                  <div class="v-align-l">
                    <div class="width-44 height-44">
                      <img class="width-44 height-44 radius-50" v-if="scope.row.avatar" :src="scope.row.avatar" alt="">
                    </div>
                    <div class="mar-l-11 color-ts-w">
                      {{scope.row.nickname}}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="orderPrice" label="销售额" min-width="80">
                <template slot-scope="scope">
                  <span v-formatNum="scope.row.orderPrice"></span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="less" scoped>
.dashboard-editor-container {
  padding: 17px 36px 30px 24px;
  background-color: #2B2B2E;
  .date--tabs{
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    background-color: #2B2B2E;
    color: rgba(255, 255, 255, .5);
    position: sticky;
    width: 100%;
    top: 50px;
    left: 0;
    z-index: 9;
    .date__tab{
      height: 32px;
      box-sizing: border-box;
      border: 1px solid #66666D;
      background-color: #2B2B2E;
      font-size: 14px;
      padding: 0 10px;
      line-height: 32px;
      color: #FFFFFF;
      &:hover{
        cursor: pointer;
      }
    }
    .date--tabs__active{
      background-color: #0A89FF;
      border: 1px solid #0A89FF;
    }
  }
  .bar-chart--box{
    background-color: #252529;
  }
  .block--title{
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }
  .line-1{
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    /*! autoprefixer: off */
    -webkit-box-orient:vertical;
    /* autoprefixer: on */
    word-break:break-word;
  }
  .v-align-l{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .radius-50{
    border-radius: 50%;
  }
  .ranking-wrap{
    background-color: #252529;
    /deep/.el-table,
    /deep/.el-table__expanded-cell{
      background-color: #252529;
    }
    /deep/.ranking-row{
      height: 68px;
      background-color: #252529;
      color: #fff;
    }
    /deep/.ranking-header{
      background-color: #252529 !important;
      color: rgba(255, 255, 255, .5);
    }
    /deep/.el-table td, 
    /deep/.el-table th.is-leaf{
      border-bottom: 1px solid #3A3A3E;
    }
    /deep/.el-table__row{
      &:last-child{
        td{
          border-bottom: unset;
        }
      }
    }
    /deep/.el-table--border::after,
    /deep/.el-table--group::after,
    /deep/.el-table::before{
      background-color: unset;
    }
    /deep/.el-table__body tr:hover>td{
      background-color: #3A3A3E!important;
    }
    /deep/.el-table__body tr.current-row>td{
      background-color: #3A3A3E!important;
    }
  }
  .color-ts-w{
    color: rgba(255, 255, 255, .5);
  }
  .rose-wrap{
    background-color: #2B2B2E;
    /deep/.ranking-row{
      height: 50px;
      background-color: #2B2B2E;
      color: rgba(255, 255, 255, .5);
    }
    /deep/.rose-header{
      background: #2B2B2E !important;
      color: rgba(255, 255, 255, .5);
    }
  }
  .author-sales-wrap{
    background-color: #2B2B2E;
  }
  .flex-top{
    align-items: flex-start;
    margin-top: 40px;
  }
  .author-rank{
    position: relative;
    .bg-img{
      width: 100%;
    }
    .content-flex{
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: space-around;
    }
    .float-box{
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      .float{
        float: left;
        width: 50%;
        height: 100%;
        position: relative;
        .headshop-img{
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background-color: #fff;
          position: absolute;
        }
      }
    }
  }

  .bar-show{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px 0px 20px 20px;
  }
  .number-panel{
    height: 204px;
    padding-top: 40px;
  }
  .number-orange{
    color: #fe980f;
  }
  .bar-icon{
    font-size: 42px!important;
    &.one-icon{
      font-size: 50px!important;
    }
    &.two-icon{
      font-size: 46px!important;
    }
    &.three-icon{
      font-size: 65px!important;
    }
  }
  .user-avatar {
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
  .panel-box{
    h2{
      margin: 0;
      padding: 0;
    }
    .more-btn{
      cursor: pointer;
      color: #36a3f7;
    }
  }
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .panel-style {
    background: #fff;
    padding: 16px 0px 0 20px;
    margin-bottom: 32px;
    &.panel-box{
      padding: 16px 20px 0 20px;
    }
  }
}
</style>
<script>
import LineChart from '@/components/Charts/LineChart'
import BarChartLayout from '@/components/Charts/BarChartLayout'
import GoodsSell from './components/goods-sell'
import MemberSell from './components/member-sell'
import RecruiterSell from './components/recruiter-sell'
import OrderSell from './components/order-sell'
import OrderTotal from './components/order-total'
import goodsTotal from './components/goods-total'
import TotalBar from './components/total-bar'
import homeRink from '@/assets/images/home-rink.png'
import rankingIcon1 from '@/assets/images/ranking-icon-1.png'
import rankingIcon2 from '@/assets/images/ranking-icon-2.png'
import rankingIcon3 from '@/assets/images/ranking-icon-3.png'
import RoseRanged from '@/components/Charts/RoseRanged'
import { debounce } from '@/utils/index'
import { listByPlatform, goodsCategoryRank, statGoodsSource, statOrderGoodsSource, goodsRank, anchorRank, rankNewAnchor } from '@/api/goods/statistics'

export default {
  name: 'dashboard-index',
  components: {
    LineChart,
    GoodsSell,
    MemberSell,
    RecruiterSell,
    OrderSell,
    OrderTotal,
    goodsTotal,
    BarChartLayout,
    TotalBar,
    RoseRanged
  },
  data() {
    RoseRanged
    return {
      activeMember: 'first',
      listLoading: false,
      dateIndex: 1,
      channelLegendDataList: [],
      channelAxisTableData: [],
      channelDataObj: {},
      sortLegendDataList: [],
      sortAxisTableData: [],
      sortDataObj: {},
      homeRink,
      rankingIcon1,
      rankingIcon2,
      rankingIcon3,
      floatLeft: [{ // 新晋10w+/100w+业绩主播头像展示位置
        left: '2%',
        top: '28%'
      }, {
        left: '37%',
        top: '11%'
      }, {
        left: '2%',
        top: '74%'
      }, {
        left: '30%',
        top: '57%'
      }, {
        left: '60%',
        top: '71%'
      }],
      floatRight: [{ // 新晋10w+/100w+业绩主播头像展示位置
        left: '22%',
        top: '16%'
      }, {
        left: '54%',
        top: '23%'
      }, {
        left: '54%',
        top: '59%'
      }, {
        left: '29%',
        top: '77%'
      }, {
        left: '84%',
        top: '82%'
      }],
      sourceChartData: [], // 商品来源分布数据
      salesChartData: [], // 商品销量分布数据
      retailTable: [], // TOP10零售商品排行数据
      wholesaleTable: [], // TOP10批发商品排行数据
      anchorTable: [], // TOP10主播业绩排行数据
      hundredThousandPriceAnchors: [], // 新晋10w+/100w+业绩主播 10w+排行数据
      millionPriceAnchors: [] // 新晋10w+/100w+业绩主播 100w+排行数据
    }
  },
  computed: {
    dateTip() {
      let str = ''
      switch (this.dateIndex) {
        case 1:
          str = this.$utils.getDate(0)
          break
        case 2:
          str = `${this.$utils.getDate(-7)}  至  ${this.$utils.getDate(-1)}`
          break
        case 3:
          str = `${this.$utils.getDate(-30)}  至  ${this.$utils.getDate(-1)}`
          break
        default:
          break
      }
      return str
    }
  },
  // 初始化页面
  created() {
  },
  mounted() {
    this.listByPlatform()
    this.goodsCategoryRank()
    this.statGoodsSource()
    this.statOrderGoodsSource()
    this.retailGoodsRank()
    this.wholesaleGoodsRank()
    this.anchorRank()
    this.rankNewAnchor()
  },
  methods: {
    dateTabsClick: debounce(function(value) {
      this.dateIndex = value
      this.listByPlatform()
      this.goodsCategoryRank()
      this.statGoodsSource()
      this.statOrderGoodsSource()
      this.retailGoodsRank()
      this.wholesaleGoodsRank()
      this.anchorRank()
      this.rankNewAnchor()
    }, 500, true),
    // 获取商品销售渠道分布
    listByPlatform() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex
      }
      listByPlatform(params).then(response => {
        this.channelLegendDataList = response.data.legendDataList
        this.channelAxisTableData = response.data.axisTableData
        this.channelDataObj = response.data.dataObj
      }).catch(() => {})
    },
    // 获取商品行业分类排行
    goodsCategoryRank() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex
      }
      goodsCategoryRank(params).then(response => {
        this.sortLegendDataList = response.data.legendDataList
        this.sortAxisTableData = response.data.axisTableData
        this.sortDataObj = response.data.dataObj
      }).catch(() => {})
    },
    // 获取商品来源分布
    statGoodsSource() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex
      }
      statGoodsSource(params).then(response => {
        const data = response.data
        data.forEach(item => {
          item.value = parseFloat(item.value)
        })
        this.sourceChartData = data
      }).catch(() => {})
    },
    // 获取商品销量分布
    statOrderGoodsSource() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex
      }
      statOrderGoodsSource(params).then(response => {
        const data = response.data
        data.forEach(item => {
          item.value = parseFloat(item.value)
        })
        this.salesChartData = data
      }).catch(() => {})
    },
    // 零售商品排行
    retailGoodsRank() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex,
        orderType: 30 // 零售30 批发31
      }
      goodsRank(params).then(response => {
        this.retailTable = response.data
      }).catch(() => {})
    },
    // 批发商品排行
    wholesaleGoodsRank() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex,
        orderType: 31 // 零售30 批发31
      }
      goodsRank(params).then(response => {
        this.wholesaleTable = response.data
      }).catch(() => {})
    },
    // 主播排行
    anchorRank() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex
      }
      anchorRank(params).then(response => {
        this.anchorTable = response.data
      }).catch(() => {})
    },
    // 10w+/100w+业绩主播
    rankNewAnchor() {
      const params = {
        enterpriseId: this.getEnterpriseId(),
        dateType: this.dateIndex
      }
      rankNewAnchor(params).then(response => {
        this.hundredThousandPriceAnchors = response.data.hundredThousandPriceAnchors
        this.millionPriceAnchors = response.data.millionPriceAnchors
      }).catch(() => {})
    }
  }
}
</script>
